<!DOCTYPE html>
<html>
<head>
	<title>无限级菜单</title>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script src="tree.js"></script>
	<style type="text/css">
		body{user-select: none;}
		*{margin: 0;padding: 0;}
		ul,li{list-style: none;-webkit-padding-start: 0;cursor: pointer}
		ul,li{padding-left: 30px}
		.on{
			
		}
		ul li.hover>span{
			color: #DC143C
		}
		.off{
			display: none
		}
	</style>
	<script>
		$(function(){
			new showAll({
				data : menulist.menulist,
				container : $("#tree"),
			});
			function showAll(options){
				var self = this;
				self.options = {
					html : "",
				}
				
				showAll.prototype.render = function(lists){
					self.op.html += "<ul>";
					for(var i in lists){
						if(lists[i].menulist.length>0){
							self.op.html += "<li><span>"+lists[i].MName+"</span>";self.render(lists[i].menulist);+"</li>";
						}else {
	                    	if(lists[i].default === true){
	                    		self.op.html += "<li class='default'><span>"+lists[i].MName+"</span></li>";
	                    	}else{
	                    		self.op.html += "<li><span>"+lists[i].MName+"</span></li>";
	                    	}
	                 	}	
					} 
					self.op.html += "</ul>";
				},
				showAll.prototype.defaultShow = function(zUl){
					zUl.find('ul').addClass('off');//默认全部关闭
				},
				showAll.prototype.event = function(){
					var zUl = self.op.container.children('ul');//默认第一级

					self.defaultShow(zUl);

					zUl.find('li').off('click').on('click',function(event){
						event.stopPropagation();
						if($(this).hasClass('hover')){
							$(this).removeClass('hover').children('ul').addClass('off');
						}else{
							//-------------清除所有效果---------------------------
							$(this).siblings('li').removeClass('hover')
									.find('ul li').removeClass('hover');
							$(this).siblings('li').find('ul').addClass('off');
							//----------------------------------------------------
							$(this).addClass('hover').children('ul').removeClass('off');
						}
					});
					
				},
				showAll.prototype.init = (function(){
					self.op = Object.assign(self.options,options);
					self.render(self.op.data);
					self.op.container.append(self.op.html);
					self.event();
				})();
			}
		});
	</script>
</head>
<body>
	<div id='tree'></div>
</body>
</html>